<template>
    <div class="personal-header">
        <ul>
            <li class="personal-photo">
                <img :src="'/' + this.$store.state.loginUser.photo" alt="">
            </li>
            <li class="cc">
                <div class="aa">
                    {{this.$store.state.loginUser.empName}}
                </div>
                <div class="bb">
                    {{this.$store.state.loginUser.dept}}
                    {{this.$store.state.loginUser.position}}
                </div>
            </li>
            <li class="operation">
                <el-button type="primary" color="rgb(45,183,245)" @click="updateUserPwdClick">修改密码</el-button>
                <el-button type="primary" color="rgb(45,183,245)" style="margin:0 10px" @click="editClick" v-show="!editing">编辑</el-button>
                <el-button type="primary" color="rgb(45,183,245)" style="margin:0 10px" @click="saveEditClick" v-show="editing">保存</el-button>
                <el-button type="primary" color="rgb(45,183,245)" style="margin:0 10px" @click="cancelEditClick" v-show="editing">返回</el-button>
                <el-icon><more-filled /></el-icon>
            </li>
        </ul>
        <user-pwd-update width="32%" ref="userPwdUpdate" @modify-successful="askReLogin"/>
    </div>
</template>

<script>
import UserPwdUpdate from "./UserPwdUpdate.vue";
export default {
    name: "PersonalHeader",
    components: {UserPwdUpdate},
    emits: ['edit-click','save-edit-click','cancel-edit-click'],
    data(){
        return{
            editing: false
        }
    },
    methods:{
        updateUserPwdClick(){
            let frm = this.$refs.userPwdUpdate;
            frm.visible = true;
        },
        editClick(){
            this.editing = true;
            this.$emit('edit-click');
        },
        askReLogin(){
            this.$operate.confirm({
                hint: '立即重新登录',
                title: '',
                executeFn: ()=>{
                    this.$router.push('/login');
                }
            })
        },
        saveEditClick(){
            this.editing = false;
            this.$emit('save-edit-click');
        },
        cancelEditClick(){
            this.editing = false;
            this.$emit('cancel-edit-click');
        }
    },
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.personal-header{
    background: rgb(249,249,249);
    padding: 10px 10px;
}
.personal-photo img{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.personal-header li{
    height: 64px;
}
.cc div{
    height: 32px;
    line-height: 32px;
}
.bb{
    color: #999;
    font-size: 13px;
}
.aa{

}
.operation{
    float: right;
    line-height: 64px;
}
</style>
